<template>
  <renderDom @on-click="JSXHandle" name="xiaoqi"></renderDom>
  <el-button plain @click="dao">倒计时</el-button>
  <div style="height:'20px'">
    <transition   
  enter-active-class="animate__animated animate__heartBeat"
  >
    <div v-show="show1" style="font-size: 50px;text-align: center;" >
      {{ numberDH }} {{ show1 }}
    </div>
  </transition>
  </div>
  
  {{ $env }}
  <button @click="random">动画</button>
  <transition-group tag="div" class="warp" move-class="mmm" > 
    <div v-for="item in list" :key="item.id"  class="item"> 
      {{ item.number }}
    </div>
  </transition-group>
  <el-button @click="show=!show">切换动画</el-button>
  <!-- <transition 
    @before-enter="EnterFrom"
    @enter="EnterActive"
    @leave="Leave"
  >
      <div class="box1" v-show="show">

      </div>
  </transition> -->
  <transition 
  leave-active-class="animate__animated animate__bounceOut"
  enter-active-class="animate__animated animate__bounceIn"
  >
      <div class="box1" v-show="show">

      </div>
  </transition>
  <!-- 异步组件 default异步结束  fallback加载中 -->
  <!-- <Suspense>
    <template #default>
      <div style="position: relative;">
              <teleport to='body'>
                <syncComponent></syncComponent>
              </teleport>
      </div>
    </template>
    <template #fallback>
      <div>
          <h1>456</h1>
      </div>
    </template>
  </Suspense> -->
  <div class="home container">
    <el-card shadow="hover">
      <div class="page-header">
        <el-avatar :size="60" :src="userInfo?.avatar" />
        <div class="page-header-tip">
          <p class="page-header-tip-title">
            {{ timeFix() }}{{ userInfo?.name }}，{{ welcome() }}
          </p>
          <p class="page-header-tip-desc">后台管理系统</p>
        </div>
      </div>
    </el-card>
    <div ref="main" style="width: 100%; height: 200px"></div>
    <div class="welcome">
      <SvgIcon name="welcome" size="400px" />
    </div>
  </div>
</template>

<script setup lang="ts">
import renderDom from './tsx'
import { ref, onMounted ,defineAsyncComponent ,nextTick } from "vue"
import * as echarts from "echarts";
import { useUserStore } from '@/store/modules/user'
import { timeFix, welcome } from '@/utils/index'
import SvgIcon from '@/components/SvgIcon/src/SvgIcon.vue'
import gsap from 'gsap'
import _ from 'lodash'
import { log } from 'console';
import { set } from '@vueuse/core';
const userStore = useUserStore()
const userInfo = userStore.userInfo
const main = ref()  
const show =ref(true)
const numberDH = ref(100)
const show1=ref(true)
const JSXHandle=(v:number)=>{
  console.log(v,'====');
}
const list = ref(Array.apply(null,{length:81} as number[]).map((_,index)=>{
  return {
    id:index,
    // number:(index % 9) +1
    number:index
  }
}))
const random=()=>{
  list.value =_.shuffle(list.value)
}
const dao=()=>{
  console.log(show1.value);
  show1.value = true
  setTimeout(() => {
    if(numberDH.value<0){
      numberDH.value=100
    }
    setTimeout(() => {
      dao()  
      show1.value = false
      nextTick(()=>{
        show1.value = true
      numberDH.value=numberDH.value-1


      })
    }, 1000);
   
  }, 1000);
}
console.log(list.value);

//异步组件
const syncComponent = defineAsyncComponent(()=>import('@/views/home/async.vue'))
onMounted(
  () => {
    init()
    setInterval(() => {
      random()
    }, 900);
  }
)
const EnterFrom=(el:Element)=>{
  gsap.set(el,{
     width:0,
     height:0,
     background:'red',
  })
    console.log('动画出现前')
}
const EnterActive=(el:Element,done:gsap.Callback)=>{
  gsap.to(el,{
     width:200,
     height:200,
     background:'yellow',
     onComplete:done
  })
  console.log('动画出现中')
}
const Leave=(el:Element)=>{
  gsap.to(el,{
     width:100,
     height:100,
     background:'red',
  })
  console.log('离开')
}
function init() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(main.value);
  // 指定图表的配置项和数据
  var option = {
    title: {
      text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
      data: ['销量']
    },
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }
    ]
  };
   myChart.setOption(option);
}
// console.log(new Set([4,5,6]),'=====')
const set:Set<number> = new Set([4,4,5,6,7])
// console.log(Array.from(set))
for (const key of set) {
  console.log(key,'---');
}
function fn<T,Y>(name:T,value:Y):Array<Y|T>{
  return [value]
}
fn(1,2)
// let div =document.querySelectorAll('div')
//     console.log(div,'======')
//     for (const iterator in div) {
//       console.log(div[iterator],'iterator');
//     }
const obj = {
  name:'lei',
  age:18
}
type AS = keyof typeof obj

function ob<T extends object,k extends keyof T>(obj:T,key:k):void{
  
}
interface  Data {
  name :string
  age:number
  sex:string
}
type Option<T extends object> ={
  [key in keyof T] ?:T[key]
}
type B = Option<Data>
ob(obj,'name')


interface Date {
  name:string
  age:number
  sex:string
}
type OPtions<K>  = {
  [key in keyof K] ? :K[key]
}
type S = OPtions<Date>
</script>

<style scoped lang="scss">
.home {
  height: 100%;

  .page-header {
    display: flex;
    align-items: center;

    .page-header-tip {
      flex: 1;
      margin-left: 20px;
    }

    .page-header-tip-title {
      margin-bottom: 12px;
      font-size: 20px;
      font-weight: 700;
      color: #3c4a54;
    }

    .page-header-tip-desc {
      min-height: 20px;
      font-size: 14px;
      color: #808695;
    }
  }

  .welcome {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
}
.box1 {
  height: 60px;
  width: 60px;
  background: red;
}
.warp{
  display: flex;
  width: 245px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.item{
  width: 25px;
  height: 25px;
  border: 1px solid #ccc;

}
.mmm{
  transition: all 1s ;
}
</style>
